import { fetchMenuPermission } from '@/api/system/menu'
import { HomePath } from '@/config'
import { defineStore } from 'pinia'
import type { MenuState } from './types'

const useMenuStore = defineStore('menu', {
  state: (): MenuState => ({
    menuList: [],
    permission: [],
  }),

  getters: {
    menuInfo(state: MenuState): MenuState {
      return { ...state }
    },
  },

  actions: {
    reset() {
      this.$reset()
    },
    update(partial: Partial<MenuState>) {
      this.$patch(partial)
    },
    getMenuList() {
      return new Promise((resolve, reject) => {
        fetchMenuPermission()
          .then((res: any) => {
            this.menuList = res
            const routers = getRouters(this, res.data)
            console.log('routers', routers)
            resolve(routers)
          })
          .catch((error: any) => {
            reject(error)
          })
      })
    },
  },
})

const modules = import.meta.glob('../../../views/**/**.vue')
function getRouters(context: any, menuList: any) {
  const buttonPermission: any = []
  const routers: any = []
  if (menuList && menuList.length > 0) {
    menuList.forEach((menu: any) => {
      if (menu.type === '0') {
        // 处理目录
        // 扁平化
        const titleList = [menu.name]
        const router = { path: menu.path, name: menu.name, children: menu.children, meta: { title: menu.name, titleList: titleList } }
        const routerList = getChildren(router, buttonPermission)
        // routers.push.apply(routers, routerList)
        routers.push(...routerList)
      }
      if (menu.type === '1') {
        // 处理菜单
        // buttonPermission.push.apply(buttonPermission, getPermission(menu))
        buttonPermission.push(...getPermission(menu))
        // const router = { path: menu.path, name: menu.componentName, component: _import(menu), meta: { title: menu.name } }
        const router = { path: menu.path, name: menu.componentName, component: modules[`../views/${menu}`], meta: { title: menu.name } }
        routers.push(router)
      }
    })
  }
  context.permission = buttonPermission
  return { path: '/', name: '主菜单', component: HomePath, children: routers, meta: { title: '主菜单' } }
}

function getChildren(menu: any, buttonPermission: any) {
  const result: any = []
  if (menu && menu.children && menu.children.length > 0) {
    menu.children.forEach((c: any) => {
      c.path = menu.path + c.path
      if (c.type === '0') {
        // const router = { path: c.path, name: c.name, component: LayoutView, children: getChildren(c, buttonPermission), meta: { title: c.name } }
        const titleList = menu.meta.titleList.concat(c.name)
        const router = { path: c.path, name: c.name, children: c.children, meta: { title: c.name, titleList: titleList } }
        const routerList = getChildren(router, buttonPermission)
        result.push(...routerList)
      }
      if (c.type === '1') {
        // buttonPermission.push.apply(buttonPermission, getPermission(c))
        buttonPermission.push(...getPermission(c))
        // const router = { path: c.path, name: c.componentName, component: _import(c.component), meta: { title: c.name, titleList: menu.meta.titleList } }
        const router = { path: c.path, name: c.componentName, component: modules[`../views/${c.component}`], meta: { title: c.name, titleList: menu.meta.titleList } }
        result.push(router)
      }
    })
  }
  return result
}

function getPermission(menu: any) {
  const permissionList: any = []
  if (menu && menu.children && menu.children.length > 0) {
    menu.children.forEach((button: any) => {
      permissionList.push(button.permission)
    })
  }
  return permissionList
}

// function _import(component: any) {
//   return () =>
//     import(`@/views${component}.vue`).catch((error) => {
//       console.log('import报错:' + error)
//       console.log(component + ':该路径下没有对应组件')
//     })
// }

export default useMenuStore
